{% extends "xhs/layout.html" %}

{% block title %}小红书数据管理系统 - 用户详情{% endblock %}

{% block page_title %}用户详情{% endblock %}

{% block page_actions %}
<a href="/users" class="btn btn-sm btn-outline-secondary">
    <i class="fas fa-arrow-left"></i> 返回用户列表
</a>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-user text-primary"></i> 用户信息
            </div>
            <div class="card-body">
                <div class="text-center mb-4">
                    <img src="https://via.placeholder.com/120" class="rounded-circle" alt="用户头像">
                    <h4 class="mt-3">{{ user.user_name }}</h4>
                    {% if user.gender %}
                    <div class="badge badge-light">
                        {% if user.gender == '男' %}
                        <i class="fas fa-mars text-primary"></i>
                        {% elif user.gender == '女' %}
                        <i class="fas fa-venus text-danger"></i>
                        {% else %}
                        <i class="fas fa-user text-secondary"></i>
                        {% endif %}
                        {{ user.gender }}
                    </div>
                    {% endif %}
                    {% if user.location %}
                    <div class="text-muted mt-2">
                        <i class="fas fa-map-marker-alt"></i> {{ user.location }}
                    </div>
                    {% endif %}
                </div>
                
                <div class="row text-center mb-4">
                    <div class="col-4">
                        <div class="h3">{{ user.notes_count|default(0) }}</div>
                        <div class="text-muted">笔记</div>
                    </div>
                    <div class="col-4">
                        <div class="h3">{{ user.followers_count|default(0) }}</div>
                        <div class="text-muted">粉丝</div>
                    </div>
                    <div class="col-4">
                        <div class="h3">{{ user.following_count|default(0) }}</div>
                        <div class="text-muted">关注</div>
                    </div>
                </div>
                
                <div class="border-top pt-3">
                    <dl class="row mb-0">
                        <dt class="col-sm-4">用户ID:</dt>
                        <dd class="col-sm-8 text-break">{{ user.user_id }}</dd>
                        
                        <dt class="col-sm-4">首次采集:</dt>
                        <dd class="col-sm-8">{{ user.first_seen_date }}</dd>
                        
                        <dt class="col-sm-4">最后更新:</dt>
                        <dd class="col-sm-8">{{ user.last_updated }}</dd>
                        
                        {% if user.profile_url %}
                        <dt class="col-sm-4">主页:</dt>
                        <dd class="col-sm-8">
                            <a href="{{ user.profile_url }}" target="_blank">
                                <i class="fas fa-external-link-alt"></i> 查看主页
                            </a>
                        </dd>
                        {% endif %}
                    </dl>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-8">
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-book-open text-danger"></i> 用户笔记
            </div>
            <div class="card-body">
                {% if notes %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>标题</th>
                                <th>发布时间</th>
                                <th>点赞</th>
                                <th>收藏</th>
                                <th>评论</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for note in notes %}
                            <tr>
                                <td>
                                    <a href="/notes/{{ note.note_id }}">
                                        {{ note.title|truncate(30) }}
                                    </a>
                                </td>
                                <td>{{ note.edit_time }}</td>
                                <td>{{ note.likes|default(0) }}</td>
                                <td>{{ note.collects|default(0) }}</td>
                                <td>{{ note.comments_count|default(0) }}</td>
                                <td>
                                    <a href="/notes/{{ note.note_id }}" class="btn btn-sm btn-outline-info">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-muted text-center py-5">
                    <i class="fas fa-file-alt fa-3x mb-3"></i>
                    <p>暂无笔记数据</p>
                </div>
                {% endif %}
            </div>
        </div>
        
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-comments text-primary"></i> 用户评论
            </div>
            <div class="card-body">
                {% if comments %}
                <div class="comments-list">
                    {% for comment in comments %}
                    <div class="comment mb-3 pb-3 border-bottom">
                        <div>
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <div>
                                    <span class="font-weight-bold">评论于:</span>
                                    <a href="/notes/{{ comment.note_id }}">笔记#{{ comment.note_id }}</a>
                                </div>
                                <div class="text-muted small">{{ comment.comment_time }}</div>
                            </div>
                            <div class="mt-1">{{ comment.comment_text }}</div>
                            <div class="mt-2 text-muted small">
                                <i class="fas fa-heart"></i> {{ comment.likes|default(0) }}
                                {% if comment.location %}
                                <span class="ml-3">
                                    <i class="fas fa-map-marker-alt"></i> {{ comment.location }}
                                </span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-muted text-center py-5">
                    <i class="fas fa-comments fa-3x mb-3"></i>
                    <p>暂无评论数据</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %} 